<template>
  <div class="s-container">
    <div style="width: 25%;">
      <span class="title">整体工作进展</span>
      <div class="work">
        <workChart :value="newSysData"/>
        <workChart :value="newSysCompleteData"/>
      </div>
    </div>
    <div style="width: 26%;">
      <span class="title">数据模型检验情况</span>
      <div class="model">
        <div class="num">
          <span>{{ submitData.data }}</span>
          <p>提交数据模型</p>
        </div>
        <div class="num">
          <span>{{ submitData.quarterData }}</span>
          <p>本季度提交数据模型</p>
        </div>
        <div>
          <pieChart :value="submitData.rate"/>
          <p>数据模型符合标准率</p>
        </div>
        <div>
          <pieChart :value="submitData.quarterRate"/>
          <p>本季度模型符合标准率</p>
        </div>
      </div>
    </div>
    <div style="width: 48%;">
      <span class="title">新建系统上线</span>
      <onLineBar :value="onLineBarData" @click="handleChartClick"/>
    </div>
  </div>
  <Dialog :title="dialogData.title" :visible="dialogData.visible" @close="dialogData.visible = false"/>
</template>

<script setup>
import onLineBar from './charts/bar5.vue';
import pieChart from './charts/pie2.vue';
import workChart from './charts/pie3.vue';
import {
  GETgetXjxtdjdsps,
  GETgetXjxtdjspwcs,
  GETgetXjmxtjdsps,
  GETgetXjmxspwcs,
  GETgetSjmxtjs,
  GETgetBjdtjsjmxs,
  GETgetSjmxbzfhl,
  GETgetBjdmxbzfhl,
  GETgetXjxtsxtgl,
  GETgetXtzdzwfglTwo,
} from '../../../api/dataSource';
import {onMounted, ref, reactive} from "vue";
import Dialog from '@/components/Dialog/Dialog.vue';

let newSysData = reactive({
  data: [{value: 0, name: '登记待审批数'}, {value: 0, name: '审批完成数'}],
  title: '新建系统',
  color: [['#2DE1FD', '#0E5FFF'], ['#FFA600', '#FEDB65']]
});
let newSysCompleteData = reactive({
  data: [{value: 0, name: '待审批数'}, {value: 0, name: '审批完成数'}],
  title: '数据模型',
  color: [['#17C334', '#87F88F'], ['#FFA600', '#FEDB65']]
});
let submitData = reactive({data: 0, quarterData: 0, rate: 0, quarterRate: 0});
let onLineBarData = reactive({tgRate: [], fgRate: [], xData: []});
let dialogData = reactive({title: '', visible: false});

function initData() {
  // 新建系统登记待审批数
  GETgetXjxtdjdsps().then(res => {
    newSysData.data[0].value = res.data.count || 0
  })
  //新建系统登记审批完成数
  GETgetXjxtdjspwcs().then(res => {
    newSysData.data[1].value = res.data.count || 0
  })
  //数据模型提交待审批数
  GETgetXjmxtjdsps().then(res => {
    newSysCompleteData.data[0].value = res.data.count || 0
  })
  //数据模型审批完成数
  GETgetXjmxspwcs().then(res => {
    newSysCompleteData.data[1].value = res.data.count || 0
  })
  //数据模型提交数
  GETgetSjmxtjs().then(res => {
    submitData.data = res.data.count || 0
  })
  //本季度提交数据模型数
  GETgetBjdtjsjmxs().then(res => {
    submitData.quarterData = res.data.count || 0
  })
  //数据模型标准符合率
  GETgetSjmxbzfhl().then(res => {
    submitData.rate = res.data.value?.replace('%', '') || 0
  })
  //本季度模型标准符合率
  GETgetBjdmxbzfhl().then(res => {
    submitData.quarterRate = res.data.value?.replace('%', '') || 0
  })
  //新建系统上线通过率二级（无）
  // GETgetXjxtsxtgl().then(res => {
  //   res.data.forEach(item => {
  //     onLineBarData.tgRate.push(item.value)
  //   }) 
  // })
  // //系统字段中文覆盖率二级
  // GETgetXtzdzwfglTwo().then(res => {
  //   res.data.forEach(item => {
  //     onLineBarData.fgRate.push(item.value)
  //     onLineBarData.xData.push(item.name)
  //   })
  // })
  Promise.all([  
    GETgetXtzdzwfglTwo(),

    GETgetXjxtsxtgl(),
   
  ]).then((res) => {
    let data = res.map((item) => item.data);
    if (data[0] && data[0].length > 0) {
      data[0].forEach((item,index) => {
        let key = item.name;
        onLineBarData.xData.push(key);
        onLineBarData.fgRate.push(item.value)
        //上线通过率写死的
        if (key == '202409') {
          onLineBarData.tgRate.push(90)
        }
        else if (key == '202504') {
          onLineBarData.tgRate.push(95.04);
        }else{
          onLineBarData.tgRate.push(0);
        }
      }); 
    }
  })
}

function handleChartClick(params) {
  if (params.seriesName == '上线通过率') {
    dialogData.visible = true
    dialogData.title = params.seriesName
  }
}

onMounted(() => {
  initData()
})
</script>

<style scoped lang="scss">
.s-container {
  height: 100%;
  display: flex;
  justify-content: space-between;

  p {
    padding: 0;
    margin: 0;
  }

  > div {
    padding: 20px 10px 10px;
    background-color: rgba(11, 44, 106, 0.6);
    border-radius: 4px;
    box-sizing: border-box;

    .title {
      position: relative;
      display: block;
      height: 26px;
      padding-left: 20px;
      font-size: 16px;
      font-weight: bold;
      color: transparent;
      background-image: linear-gradient(to bottom, #fff, #98BBFF);
      -webkit-background-clip: text;
      background-clip: text;

      &:before {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        left: 0;
        top: 7px;
        background-color: #3A8FFF;
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      }
    }
  }

  .model {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    > div {
      width: 49%;
      position: relative;
      text-align: center;

      > span {
        display: block;
        height: 50px;
        font-size: 16px;
        font-weight: bold;
        color: transparent;
        background-image: linear-gradient(to bottom, #fff, #37C9C9);
        -webkit-background-clip: text;
        background-clip: text;
      }

      > p {
        margin-top: 5px;
        color: #fff;
        font-size: 12px;
      }
    }

    .num {

      &:after {
        position: absolute;
        content: '';
        width: 58px;
        height: 32px;
        top: 15px;
        left: calc(50% - 29px);
        background: url("../../../static/mzjyIcon.png") no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }

  .work {
    display: flex;

    > div {
      width: 50%;
    }
  }
}
</style>
